<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
  pre {
    border: medium double black;
  }
  </style>
</head>

<body>
  <pre id="results"></pre>
  <p id="tblock">There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone. By the time we add the countless types of <span id="apple">apples</span>,
    <span="orange">oranges</span="orange">, and other well-known fruit, we are faced with thousands of choices.</p>
  <script type="text/javascript">
  var resultsElement = document.getElementById('results');
  var elems = document.getElementById('tblock').getElementsByTagName('span');
  resultsElement.innerHTML += "There are " + elems.length + " span elements\n";
  var elems2 = document.getElementById('tblock').querySelectorAll('span');
  resultsElement.innerHTML += "There are " + elems2.length + " span elements (Mix)\n";
  var selElems = document.querySelectorAll("#tblock > span");
  resultsElement.innerHTML += "There are " + selElems.length + " span elements (CSS)\n";
  </script>
</body>

</html>
